<script setup lang="ts">
  import { ref, computed } from 'vue'
  const range = ref(500)
  const boxWidth = computed(() => `width: ${range.value}px`)
  const list = ['vue', 'vite', 'pinia', 'vue-router', 'vue-i18n', 'tailwindcss', 'vitest']
</script>
<template>
  <div class="con p-8" :style="boxWidth">
    <div class="range-box">
      <div
        v-for="item in list"
        :key="item"
        class="range-item px-4 bg-green-500 rounded-md text-white text-3xl leading-loose text-nowrap"
        >{{ item }}</div
      >
    </div>
  </div>
  <input v-model="range" type="range" min="200" max="800" class="range-input block" />
</template>
<style scoped>
  .con {
    display: flex;
    overflow: hidden;
    align-items: center;

    width: 800px;
    margin: 20px auto 0 auto;
    padding: 15px;

    outline: 2px solid rgb(74 222 128 / 1);

    gap: 5px;
  }
  .con::after {
    display: block;

    padding: 0 1rem;

    content: '+' counter(num);

    border-radius: 0.375rem;
    background-color: blanchedalmond;

    font-size: 1.875rem;
    line-height: 2;
  }
  .range-box {
    position: relative;

    display: flex;
    overflow: hidden;
    /* 借助负margin隐藏num伪元素 */

    margin-right: -52px;
    padding: 5px;

    counter-reset: num 7;
    animation: check;

    gap: 5px;
    animation-timeline: scroll(x self);
  }
  .range-item {
    animation: appear;

    background-color: rgb(74 222 128 / 0.5);

    animation-timeline: view(inline);
    animation-range: contain;
  }
  .range-item + .range-item {
    margin-left: 10px;
  }
  .range-input {
    margin: 20px auto 0 auto;
  }
  @keyframes check {
    from,
    to {
      margin-right: 0;

      -webkit-mask: linear-gradient(to right, #fff calc(100% - 30px), transparent);
    }
  }
  @keyframes appear {
    from,
    to {
      counter-increment: num -1;

      background-color: rgb(74 222 128 / 1);
    }
  }
</style>
